
// ---------------- VARIABLES POUR LES COULEURS DE BASE -----------------------
@grisclaire: #f5f5f5;            
@gris:      #e6e6e6;            // inside background
@bleu1:     #afd2e6;            // buttons
@bleu2:     #87bedc;            // buttons:hover
@bleu3:     #55a0d2;
@bleu4:     #327daa;
@bleu4:     #195582;            // outside background
@greyFont:  #444;


//@base-outside: #195582;         //
//@base-inside: #e6e6e6;          //

//@base-outside: #424a38; 	//green
//@base-inside: #5a6f87;	//blue --> lighten(@base-inside, 40%);
//@base-outside: #8c393c;  	//red
//@base-inside: #ab6937;	//orange dark --> lighten(@base-inside, 40%);
//@base-inside: #d4a960;        //orange light --> lighten(@base-inside, 25%);




// ------------------------------- GENERAL ------------------------------------
* {
    padding: 0;
    margin: 0;
    text-decoration:none;
    font-family: "Helvetica","Arial",Sans-serif;	
}
body {
    background:url(img/bg_site.jpg) top left repeat scroll;
}
#main {
    //background-color: @bleu4;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    overflow: hidden;

}

h2 {
    font-size: 1.2em;
}

a:visited {
    color: white;
}
a:hover {
    color: @bleu1;
    //text-decoration: underline
}

em {
    color: red;
}
#messageJavaScript {
    color: red;
    font-weight:    bold;
    background: white;
    padding: 10px;
}
// ------------------------------- identification ------------------------------------
#identification {
    margin-left: 180px;
    margin-top:  40px;
}
#identification form .form-actions {
    margin-right: 307px;
}

// ------------------------------- HEADER ------------------------------------
header {
    height: 120px;
    width: 800px;
    overflow:	hidden;
}
header div {
    float: left;
    color: white;
    font-size: 0.8em;
}
#etat a {
    color: white !important;
}
#etat a:visited {
    color: white !important;
}

#accueil {
    width: 120px;
    height: 120px;
}
// Lien sur Accueil pour IE
#accueil a {
    color: transparent;
}
#accueil a:visited {
    color: transparent;
}



#infosHeader {
    width: 680px;
}

header div p, header div div, #etat a {
    float: left;
    height: 20px;
    margin-top: 23px;
    margin-left: 5px;
}
#etat {
    margin-left: 50px;
    margin-top: 0px;
    font-size:1em;
}

#user {
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 23px;
    text-align: right;
    float: right;
}
#logout {
    float:  right;
    width: 20px;
    height: 20px;
}
#logout{
    margin-top: 20px;
    background: url(img/logout.png) no-repeat left top;
}
#logout:hover{
    background: url(img/logout.png) no-repeat left bottom;
}





// ------------------------------- CONTENU GENERAL ------------------------------------
#content {
    width:  670px;
    min-height: 640px;
    float: left;
    color: @greyFont;
    background:url(img/bg_main.jpg) top left repeat scroll;
    margin-top: -70px;
    margin-left: 10px;
    padding-top: 20px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

#content a:visited {
    color: @bleu3;
}
#content a:visited {
    color: @bleu3;
}


#content div:last-child{
    margin-bottom: 20px;
}
.article {
    width:	590px;
    margin-left: 40px;
    margin-top:	20px;	
    overflow: hidden;
}



.photo {
	margin: 0;
	padding: 10px;
	vertical-align: top;
}

td.photo img {
        width: 100px;
	height: 100px;
	padding: 5px;
	background: #fff;
	border: 1px solid #ddd;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	margin: 0;
	border-radius: 4px;
}



// ------------------------------- USERMESSAGE ERROR ------------------------------------


.usermessage.error {
  color: red;
  border: 1px solid red;
  background-color: #FFEEEE;
  padding: 1px;
  margin-top: 0px;
  margin-left: 10px !important;
  margin-right: 50px;
  margin-bottom: -17px;
  font-size: 0.8em;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: 10px center;
  width: 615px;
  margin-left: 40px;
  text-align: center;
}